<template>
	<div v-loading="loading" style="width:100%" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
		<el-row>
			<!--<iframe src="http://192.168.1.48:8080" width="100%" height=""></iframe>-->
			<el-col :span="6">
				<div @mouseenter="openSubject" @mouseleave="closeSubject">
					<div class="currentTitle">{{ currentGrade }}{{ currentSubject }}</div>
					<el-collapse-transition>
					<div class="subject" v-if="showAllsubject">
						<div v-for="item in subjectList">
							<p>{{ item.name }}</p>
							<div v-for="x in item.subject" @click="chooseSubject(item,x)">
								{{ x.name }}
							</div>
						</div>
					</div>
					</el-collapse-transition>
				</div>
				<div class="knowledge">
					<div v-for="(item,index) in bigKnowledge">
						<p>{{ index==0?'章节选择':'知识点选择' }}</p>
						<div v-for="(x,$index) in item" @click="chooseKnowledge(x,index,$index)" :class="{active:currentBigKnowledgeIndex==$index&&currentKnowledgeType==index}">
							{{ x.name }}
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="18" class="rightContent">
				<div class="questionType clearfix top">
					<span class="title">题型:</span>
					<div class="content">
						<div v-for="item in currentQuestionTypeList">
							{{ item.name }}&nbsp;&nbsp;
							<el-input-number v-model="item.count" size="small" :min="0" :max="20" label=""></el-input-number>
						</div>
					</div>
				</div>
				<div class="questionLevel clearfix top">
					<span class="title">难易度:</span>
					<div class="content">
						<div v-for="item in currentQuestionLevelList" @click="chooseQuestionLevel(item)" :class="{active:currentLevel_id==item.id}">
							{{ item.name }}
						</div>
					</div>
				</div>
				<div class="content">
					<div v-for="x in knowledgeList" class="clearfix">
						<input type="checkbox" v-model="x.checkAll" value="12" v-on:change="chooseAll(x,$event)" :value="x.name" /><label>{{ x.name }}</label>
						<ul>
							<li v-for="item in x.son" :title="item.name">
								<input type="checkbox" value="12" class="chec" v-model="x.checkGroup" v-on:change="chooseOne(x,$event)" :value="item.id" /><label>{{ item.name }}</label>
							</li>
						</ul>
					</div>
				</div>
				<div type="success" @click="complete" class="createdTest">创建</div>
			</el-col>
			<div class="totast" v-show="showTotast">{{ totastMsg }}</div>
		</el-row>
	</div>
</template>

<script>
	import api from '../../api';
	import { getObjByprop, setStore, subjectMatch } from '../../util/util'
	import $ from "jquery";
	export default {
		data() {
			return {
				showTotast:false,
				totastMsg:'',
				loading: true,
				subjectList: [],
				currentGrade: '',
				currentSubject: '',
				showAllsubject: false,
				currentSubjectId: 1,
				currentQuestionTypeList: [],
				currentLevel_id: 2,
				currentQuestionLevelList: [],
				knowledgeList: [],
				bigKnowledge: [],
				currentBigKnowledgeIndex: 0,
				currentKnowledgeType: 0,
				courseid:''

			}
		},
		components: {},
		created() {
			var that = this
			api.getListSubject().then(response => {
				that.subjectList = response.data.datalist;
				that.currentGrade = that.subjectList[0].name;
				that.currentSubject = that.subjectList[0].subject[0].name;
				that.courseid=subjectMatch(that.currentSubject)
				//初始化题型
				that.getQuestionType(1)
				//初始化知识点结构
				that.getKnowledges(1)
			})
			api.getListQuestionLevel().then(response => {
				that.currentQuestionLevelList = response.data.datalist
				//默认题目难易度level_id
				that.currentLevel_id = that.currentQuestionLevelList[0].id
			})
		},
		methods: {
			openSubject() {
				this.showAllsubject = true;
			},
			closeSubject() {
				this.showAllsubject = false
			},
			chooseSubject(item, x) {
				this.loading = true;
				this.currentSubjectId = x.id;
				this.currentGrade = item.name;
				this.currentSubject = x.name;
				this.courseid=subjectMatch(this.currentSubject)
				this.bigKnowledge = [];
				this.getQuestionType(this.currentSubjectId);
				this.getKnowledges(this.currentSubjectId, 1);
			},
			getQuestionType(subject_id) {
				var that = this;
				this.loading = true;
				api.getQuestionType(subject_id).then(response => {
					var arr = response.data.datalist.filter(function(x) {
						return ['3', '39', '7'].indexOf(x.id) > -1
					})
					arr.forEach(function(v, i) {
						v['count'] = 0
					});
					that.currentQuestionTypeList = arr
					//单选题==3   判断题==39 多选题==7
				})

			},
			getKnowledges(subject_id) {
				var that = this;
				this.loading = true;
				//0==章节  1==知识点
				api.getKnowledges({
					'subject_id': subject_id,
					'type': 0
				}).then(response => {
					that.bigKnowledge.push(response.data.datalist);
					api.getKnowledges({
						'subject_id': subject_id,
						'type': 1
					}).then(response => {
						that.bigKnowledge.push(response.data.datalist);
						that.loading = false;
						that.chooseKnowledge(that.bigKnowledge[0][0], 0, 0)
					})
				})

			},
			chooseQuestionLevel(item) {
				this.currentLevel_id = item.id;
			},
			chooseKnowledge(data, index, $index) {
				this.knowledgeList = data.son
				this.currentBigKnowledgeIndex = $index;
				this.currentKnowledgeType = index
				this.knowledgeList.forEach(function(v, i) {
					v['allIdList'] = []
					v['checkGroup'] = [];
					v['checkAll'] = false;
					if(v.son) {
						v['allIdList'] = v.son.map(function(x) {
							return x.id
						})
					}
					v['allIdList'].push(v.id)
				})
			},
			chooseAll(x, event) {
				x.checkGroup = x.allIdList
				if(x.checkAll) {
					$(event.target).next().next().children().children('input').prop('checked', true)
				} else {
					$(event.target).next().next().children().children('input').prop('checked', false)
				}

			},
			chooseOne(x, event) {
				if(x.checkGroup.length == x.allIdList.length) {
					$(event.target).parent().parent().prev().prev().prop('checked', true)
				} else {
					$(event.target).parent().parent().prev().prev().prop('checked', false)
				}
			},
			handleChange(x) {
			},
			complete() {
				var that = this;
				//获取题型数量匹配关系
				var params = {}
				var type_id = [];
				var cate_id = [];
				this.currentQuestionTypeList.forEach(function(v, i) {
					if(v.count>0){						
						type_id.push(v.id + '_' + v.count)
					}
				})
				this.knowledgeList.forEach(function(v, i) {
					if(v.checkGroup.length > 0) {
						cate_id.push(v.checkGroup)
					}
				})
				params['type_id'] = type_id.join(',');
				params['cate_id'] = cate_id.join(',');
				params['level_id'] = this.currentLevel_id;
				if(params['type_id'] && params['cate_id']) {
					this.loading = true
					api.getTestQuestionList(params).then(response => {
						that.loading = false
						if(response.data.code == '200') {
							if(response.data.datalist.length > 0) {
								setStore('test_params', params)
								that.$router.push({
									path: `/completeTaojuan/${that.courseid}/1`
								})
							} else {
//								that.$message({
//									type: 'error',
//									message: '没有符合条件的题目，请重新选择'
//								});
								this.showTip('没有符合条件的题目，请重新选择')
							}
						}
					})
				} else {
//					that.$message({
//						type: 'error',
//						message: '请选择正确的题型数量和知识点数量'
//					});
					this.showTip('请选择正确的题型数量和知识点数量')
				}

			},
			showTip(msg){				
					var that=this;
					this.totastMsg=msg;
					this.showTotast=true;
					setTimeout(function(){
						document.getElementsByClassName('totast')[0].style.backgroundColor='rgba(0,0,0,0)'
						setTimeout(function(){
							that.showTotast=false	
							document.getElementsByClassName('totast')[0].style.backgroundColor='rgba(0,0,0,0.5)'
						},800)
					},1000)
			}
		}
	}
</script>

<style scoped>
	iframe {
		width: 100%;
		height: 700px;
		frameborder: 0;
		border: none;
	}
	
	.currentTitle {
		background-color: #14acf4;
		color: white;
		font-size: 18px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		cursor: default;
		transition: all 0.5s;
	}
	
	.subject {
		cursor: default;
		border-bottom: 1px dashed #999999;
		padding-bottom: 22px;
		margin-bottom: 16px;
	}
	
	.subject>div {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding-bottom: 10px;
	}
	
	.subject>div>p {
		width: 100%;
		margin: 7px auto;
		color: #14acf4;
		font-size: 18px;
	}
	
	.subject>div>div {
		width: 25%;
		font-size: 14px;
		margin-top: 4px;
		margin-bottom: 4px;
	}
	
	.subject>div>div:hover {
		color: #14acf4;
	}
	.knowledge>p{
		margin-top: 8px;
		font-size: 14px;
		font-weight: bold;
	}
	
	.knowledge {
		cursor: default;
		max-height: 600px;
		overflow-y: scroll;
		z-index: 2;
	}
	
	.knowledge>div>div.active {
		background-color: #f0f7ff;
	}
	
	.knowledge>div>div.active:hover {
		background-color: #f0f7ff;
	}
	
	.knowledge>div>div {
		line-height: 30px;
		text-indent: 12px;
		font-size: 14px;
	}
	
	.knowledge>div>div:hover {
		background-color: #f5f7fb;
		cursor: pointer;
	}
	
	.questionType {}
	
	.top {
		margin: 10px auto;
	}
	
	.top>span {
		width: 60px;
		margin-top: 10px;
		float: left;
		text-align: right;
		font-size: 14px;
	}
	
	.top>.content {
		float: left;
		width: 90%;
		cursor: default;
		margin-left: 10px;
	}
	.rightContent {
		padding-left: 20px;
		cursor: default;
		position: relative;
	}
	.rightContent:before{
		content: '';
		display: block;
		position: absolute;
		left: -2px;
		height: calc(100% - 42px);
		width: 2px;
		top: 42px;
		background-color: #F2F2F2;
	}
	.rightContent>.top>.content>div {
		display: inline-block;
		padding: 5px 15px;
		margin-right: 15px;
		font-size: 14px;
		color: #999999;
	}
	
	.rightContent>.top:nth-of-type(1)>.content>div {
		padding: 5px 0;
	}
	
	.rightContent>.top:nth-of-type(2) {
	}
	
	.top>.content>div.active {
		background-color: #14acf4;
		color: white;
	}
	
	.rightContent {
		padding-left: 20px;
		cursor: default;
	}
	.rightContent>.content{
		border-top: 1px dashed #f2f2f2;
		
	}
	.rightContent>.content div {
		margin-top: 15px;
	}
	.rightContent>.content>div>label{
		font-weight: bold;
		font-size: 14px;
	}
	.rightContent .content div ul {
		padding-left: 15px;
		margin-top: 5px;
	}
	
	.rightContent .content div ul>li {
		list-style: none;
		float: left;
		width: 20%;
		overflow: hidden;
		height: 20px;
		margin-top: 5px;
		font-size: 14px;
	}
	
	.createdTest {
		width: 100%;
		margin-top: 40px;
		letter-spacing: 12px;
		font-size: 16px;
		background-color: #14ACF4;
		border-radius: none;
		text-align: center;
		color: white;
		height: 36px;
		line-height: 36px;
	}
	.el-input-number__decrease, .el-input-number__increase{
		color: #14ACF4!important;
	}
	.el-input-number--small .el-input-number__decrease, .el-input-number--small .el-input-number__increase{
		border: 1px solid #14ACF4!important;
	}
</style>